
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<!--edge浏览器H5兼容设置-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--360浏览器H5兼容设置-->
	<meta name="renderer" content="webkit" />
	<title>学子商城</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--导入核心文件-->
	<script src="../bootstrap3/js/holder.js"></script>
	<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
	<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
	<script src="../bootstrap3/js/bootstrap.js"></script>
	<!-- 字体图标 -->
	<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
	<link rel="stylesheet" type="text/css" href="../css/layout.css" />
	<link rel="stylesheet" type="text/css" href="../css/top.css" />
	<link rel="stylesheet" type="text/css" href="../css/footer.css" />
	<link rel="stylesheet" type="text/css" href="../css/order.css" />
	<script src="../js/vue@3.3.4.global.js"></script>
	<script src="../js/axios.js"></script>
</head>

<body>
<!--头部-->
<header class="header">
	<!--学子商城logo-->
	<div class="row">
		<div class="col-md-3">
			<a href="index.html">
				<img src="../images/index/stumalllogo.png" />
			</a>
		</div>
		<!--快捷选项-->
		<div class="col-md-9 top-item">
			<ul class="list-inline pull-right">
				<li><a href="favorites.html"><span class="fa fa-heart"></span>&nbsp;收藏</a></li>
				<li class="li-split">|</li>
				<li><a href="orders.html"><span class="fa fa-file-text"></span>&nbsp;订单</a></li>
				<li class="li-split">|</li>
				<li><a href="cart.html"><span class="fa fa-cart-plus"></span>&nbsp;购物车</a></li>
				<li class="li-split">|</li>
				<li>
					<!--下列列表按钮 ：管理-->
					<div class="btn-group">
						<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
							<span id="top-dropdown-btn"><span class="fa fa-gears"></span>&nbsp;管理 <span class="caret"></span></span>
						</button>
						<ul class="dropdown-menu top-dropdown-ul" role="menu">
							<li><a href="password.html">修改密码</a></li>
							<li><a href="userdata.html">个人资料</a></li>
							<li><a href="upload.html">上传头像</a></li>
							<li><a href="address.html">收货管理	</a></li>
						</ul>
					</div>
				</li>
				<li class="li-split">|</li>
				<li><a href="login.html"><span class="fa fa-user"></span>&nbsp;登录</a></li>
			</ul>
		</div>
	</div>
</header>
<!--导航 -->
<!--分割导航和顶部-->
<div class="row top-nav">
	<div class="col-md-6">
		<ul class="nav nav-pills">
			<li>
				<a href="#"></a>
			</li>
			<li class="active"><a href="index.html"><span class="fa fa-home"></span></a></li>
			<li><a href="#">秒杀</a></li>
			<li><a href="#">优惠券</a></li>
			<li><a href="#">学子VIP</a></li>
			<li><a href="#">外卖</a></li>
			<li><a href="#">超市</a></li>
		</ul>
	</div>
	<div class="col-md-6">
		<form action="search.html" class="form-inline pull-right" role="form">
			<div class="form-group">
				<input type="text" class="form-control" id="search" name="search" placeholder="请输入商品名称进行搜索">
			</div>
			<button type="submit" class="btn btn-default btn-sm"><span class="fa fa-search"></span></button>
		</form>
	</div>
</div>
<!--头部结束-->
<!--导航结束-->
<div class="container"  id="mainContainer">

	<div class="col-md-2">
		<!--左侧导航开始-->
		<div class="panel-group" id="accordion">
			<div class="panel panel-default">
				<div class="panel-heading">
					<!--主选项：我的订单-->
					<p class="panel-title">
						<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">我的订单</a>
					</p>
				</div>
				<div id="collapseOne" class="panel-collapse collapse in">
					<div class="panel-body">
						<!--								<div><a href="orders.html"><b>全部订单</b></a></div>-->
						<!--								<div><a href="orders.html">待付款</a></div>-->
						<!--								<div><a href="orders.html">待收货</a></div>-->
						<!--								<div><a href="orders.html">待评价</a></div>-->
						<!--								<div><a href="orders.html">退货退款</a></div>-->
						<div><a  @click="this.getCartList(null)"><b>全部订单</b></a></div>
						<div><a href="nopayorder.html" >待付款</a></div>
						<div><a href="notarrived.html">待收货</a></div>
						<div><a href="received.html">已收货</a></div>
						<div><a href="saleservice.html">退货退款</a></div>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<!--主选项：资料修改-->
					<p class="panel-title">
						<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">资料修改</a>
					</p>
				</div>
				<div id="collapseTwo" class="panel-collapse collapse">
					<div class="panel-body">
						<div><a href="password.html"><b>修改密码</b></a></div>
						<div><a href="userdata.html">个人资料</a></div>
						<div><a href="upload.html">上传头像</a></div>
						<div><a href="address.html">收货管理</a></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--左侧导航结束-->
	<div class="col-md-10" v-if="cartList!=null" v-for="cart in cartList">
		<div class="panel panel-default">
			<div class="panel-heading">
				<!--						<p class="panel-title">-->
				<!--							订单号：1101000001，下单时间：2018-12-1 17:50:30 ，收货人：八戒-->
				<!--						</p>-->
				<p class="panel-title" >
					订单号：{{cart.id}}，下单时间：{{cart.orderTime}} ，收货人：{{cart.recvName}}
				</p>
			</div>
			<div class="panel-body" v-for="item in cart.orderItemVOList">
				<table class="orders-table" width="100%">
					<thead>
					<tr>
						<th width="15%"></th>
						<th width="30%">商品</th>
						<th width="8%">单价</th>
						<th width="8%">数量</th>
						<th width="9%">小计</th>
						<th width="10%">售后</th>
						<th width="10%">状态</th>
						<th width="10%">操作</th>
					</tr>
					</thead>
					<tbody class="orders-body">
					<tr>
						<td><img :src="item.image+'collect.png'" class="img-responsive" /></td>
						<td>{{item.title}}</td>
						<td>¥<span>{{item.price}}</span></td>
						<td>{{item.num}}件</td>
						<td>¥<span>{{item.total}}</span></td>
						<td><a href="#">申请售后</a></td>
						<td>
<!--							<div>已发货</div>-->
							<div v-if="cart.status==0">未支付</div>
							<div v-if="cart.status==1">已支付</div>
							<div v-if="cart.status==2">已收货</div>
							<div v-if="cart.status==3">已完成订单</div>
							<div>
								<a href="orderInfo.html">
									订单详情
								</a>
							</div>
						</td>
						<td>
							{{item.status}}
							<a v-if="cart.status==0" href="orderConfirm.html" class="btn btn-default btn-xs" >
								去付款
							</a>
							<!--										//订单状态(0未支付,1已支付,2已收货,3退货退款)-->
							<a v-if="cart.status==1" href="javascript:void(0)" class="btn btn-default btn-xs" @click="modifyStatus(cart.id)">
								确认收货
							</a>
							<a v-if="cart.status==2" href="javascript:void(0)" class="btn btn-default btn-xs"  @click="modifyshouhou(cart.id)">
								申请售后
							</a>

							<a v-if="cart.status==3" href="#" class="btn btn-default btn-xs">
								已退货退款
							</a>
						</td>
					</tr>
					</tbody>
				</table>
				<div>
					<span class="pull-right">订单总金额：¥{{cart.totalPrice}}</span>
				</div>
			</div>
		</div>

	</div>
	<div class="col-md-10" v-if="cartList==null" style="display: flex;justify-content: center; margin-bottom: 20px; ">
		<img style="max-width: 60%;max-height: 60%;" src="../images/not_found.jpg">
	</div>
</div>
<!--页脚开始-->
<div class="clearfix"></div>
<footer class="footer">
	<!-- 品质保障，私人定制等-->
	<div class="text-center rights container">
		<div class="col-md-offset-2 col-md-2">
			<span class="fa fa-thumbs-o-up"></span>
			<p>品质保障</p>
		</div>
		<div class="col-md-2">
			<span class="fa fa-address-card-o"></span>
			<p>私人订制</p>
		</div>
		<div class="col-md-2">
			<span class="fa fa-graduation-cap"></span>
			<p>学生特供</p>
		</div>
		<div class="col-md-2">
			<span class="fa fa-bitcoin"></span>
			<p>专属特权</p>
		</div>
	</div>
	<!--联系我们、下载客户端等-->
	<div class="container beforeBottom">
		<div class="col-md-offset-1 col-md-3">
			<div><img src="../images/index/stumalllogo.png" alt="" class="footLogo" /></div>
			<div><img src="../images/index/footerFont.png" alt="" /></div>
		</div>
		<div class="col-md-4 callus text-center">
			<div class="col-md-4">
				<ul>
					<li>
						<a href="#">
							<p>买家帮助</p>
						</a>
					</li>
					<li><a href="#">新手指南</a></li>
					<li><a href="#">服务保障</a></li>
					<li><a href="#">常见问题</a></li>
				</ul>
			</div>
			<div class="col-md-4">
				<ul>
					<li>
						<a href="#">
							<p>商家帮助</p>
						</a>
					</li>
					<li><a href="#">商家入驻</a></li>
					<li><a href="#">商家后台</a></li>
				</ul>
			</div>
			<div class="col-md-4">
				<ul>
					<li>
						<a href="#">
							<p>关于我们</p>
						</a>
					</li>
					<li><a href="#">关于达内</a></li>
					<li><a href="#">联系我们</a></li>
					<li>
						<span class="fa fa-wechat"></span>
						<span class="fa fa-weibo"></span>
					</li>
				</ul>
			</div>
		</div>
		<div class="col-md-4">
			<div class="col-md-5">
				<p>学子商城客户端</p>
				<img src="../images/index/ios.png" class="lf">
				<img src="../images/index/android.png" alt="" class="lf" />
			</div>
			<div class="col-md-6">
				<img src="../images/index/erweima.png">
			</div>
		</div>
	</div>
	<!-- 页面底部-备案号 #footer -->
	<div class="col-md-12 text-center bottom">
		Copyright © 2018 Tedu.cn All Rights Reserved 京ICP备08000853号-56 <a target="_blank" href="http://www.tedu.cn/">达内时代科技集团有限公司</a> 版权所有
	</div>
</footer>
<!--页脚结束-->
</body>
<script>
	const app = Vue.createApp({
		data(){
			return {
				cartList:[],
			}
		},
		methods:{
			getCartList(){

					const token = localStorage.getItem("token");
					axios.get("http://localhost:6081/order/list", {
						headers: {"Authorization": token}

					}).then(res => {
						if (res.data.code == 20000) {
							console.log("get orders success!")
							console.log(res)
							this.cartList = res.data.data;
							console.log("cartlist")
						} else {
							console.log("get orders fault")
							console.log(res)
						}
					}).catch(e => {
						console.log("get orders error")
						console.log(e)
					})

				 },


			modifyStatus(rid) {
				const token = localStorage.getItem("token");
				console.log("token:",token)
				axios.put('http://localhost:6081/order/takeDelivery',
						{ id: rid },{
					headers: {
						"Authorization": token
					}
				}).then(resp => {
					console.log(resp);
					if (resp.data.code === 20000) {
						console.log("操作成功")
					}
				}).catch(err => {
					console.log(err)
				});
			},
			modifyshouhou(rid) {
				const token = localStorage.getItem("token");
				console.log("token:",token)
				axios.put('http://localhost:6081/order/saleService',
						{ id: rid },{
							headers: {
								"Authorization": token
							}
						}).then(resp => {
					console.log(resp);
					if (resp.data.code === 20000) {
						console.log("操作成功")
					}
				}).catch(err => {
					console.log(err)
				});
			}


			},

		mounted(){
			this.getCartList()
			// this.modifyStatus()



		}
	})
	app.mount("#mainContainer");
</script>
</html>
